<style scoped>
.img-face {
  max-width: 200px;
  max-height: 200px;
  padding: 10px;
  cursor: pointer;
}
</style>
<template>
  <div>
    <Card style="margin-bottom: 10px">
      <Form inline class="form-search">
        <FormItem>
          <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="false"
            v-model="sdate"></DatePicker>
        </FormItem>
        <FormItem>
          <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="false"
            v-model="edate"></DatePicker>
        </FormItem>
        <FormItem> </FormItem>
        <FormItem>
          <Input v-model="keyword" placeholder="客户名称/商品" style="width: 200px" />
        </FormItem>

        <FormItem>
          <Button type="primary" @click="
  page = 1;
SearchSaleOrder();
          " icon="md-search">查询</Button>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="AddData()" icon="md-add">新增</Button>
        </FormItem>
      </Form>
    </Card>
    <Table ref="table" style="margin-bottom: 10px" border show-summary :summary-method="handleSummary"
      :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>
    <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]"
      @on-change="
        (s) => {
          page = s;
          SearchSaleOrder();
        }
      " @on-page-size-change="
  (p) => {
    size = p;
    page = 1;
    SearchSaleOrder();
  }
" show-total show-sizer />
    <Modal width="1200" :footer-hide="true" v-model="modalData" :title="modalTitle"
      :mask-closable="false" sticky draggable>
      <Saleorderedit v-if="modalData" :Id="tempDataId" :Type="tempType" @on-success="onSuccess"></Saleorderedit>
    </Modal>

    <iframe id="iframe-print" frameborder="0" style="display: none" scrolling="auto" :src="printSrc"></iframe>
  </div>
</template>

<script>
import {
  SearchSaleOrder,
  GetSaleOrderAndPrint,
  DeleteSaleOrder,
  CheckSaleOrder
} from '@/api/saleorder'
import Saleorderedit from './saleorderedit.vue'
export default {
  name: 'saleorder',
  components: { Saleorderedit },
  data () {
    return {
      Extras: {},
      printSrc: '/static/print/saleorder.html?temp=' + Date.parse(new Date()),
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 450,
      sdate: '',
      edate: '',
      keyword: '',
      ruleValidate: {},
      loading: false,
      loadingTable: false,
      tempDataId: 0,
      tempType: 0,
      isPrint: 0,
      modalData: false,
      tableTitle: [
        {
          type: 'index',
          key: 'index',
          title: '序号',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 220,
          render: (h, params) => {
            var operateArr = []
            operateArr.push(h('Button', {
              props: {
                type: 'success',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.CheckSaleOrder(params.row.Id, params.row.Status == 1 ? 0 : 1)
                }
              }
            }, params.row.Status == 1 ? '弃审' : '审核'))
            operateArr.push(h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.GetSaleOrderAndPrint(params.row.Id)
                }
              }
            }, '打印'))
            if (params.row.Status == 0) {
              operateArr.push(h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    var vm = this
                    vm.tempDataId = params.row.Id
                    vm.tempType = 0
                    vm.modalData = true
                  }
                }
              }, '修改'))
              operateArr.push(h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.DeleteSaleOrder(params.row.Id)
                  }
                }
              }, '删除'))
            }
            return h('div', operateArr)
          }
        },
        {
          key: 'SaleOrderDate',
          title: '单据日期',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', {}, this.dayjs(params.row.SaleOrderDate).format('YYYY-MM-DD'))
          }
        },
        {
          key: 'OrderNo',
          title: '单据编号',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h(
              'a',
              {
                style: {
                  fontSize: '16px',
                  textDecoration: 'underline'
                },
                on: {
                  click: () => {
                    let vm = this
                    vm.tempDataId = params.row.Id
                    vm.tempType = 1
                    vm.modalData = true
                  }
                }
              },
              params.row.OrderNo
            )
          }
        },
        {
          key: 'CustomerName',
          title: '客户名称',
          width: 100,
          align: 'center'
        },

        {
          key: 'OrderDesc',
          title: '商品',
          width: 200,
          align: 'center'
        },
        {
          key: 'Amount',
          title: '合计(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'FreightFee',
          title: '运费(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'GiveupFee',
          title: '抹零金额(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'AllFee',
          title: '累计金额(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'PayFee',
          title: '付款金额(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'PrintNum',
          title: '打印次数',
          width: 100,
          align: 'center'
        },
        {
          key: 'Remark',
          title: '备注',
          width: 200,
          align: 'center'
        }
      ],
      tableData: [],
      allRoles: [],
      tempRoleIds: [],
      checkAll: false,
      tempDetail: [],
      modalChose: false,
      configData: {},
      dataProduct: []
    }
  },
  computed: {
    modalTitle () {
      if (this.tempType == 1) {
        return '销售单详情'
      } else {
        if (this.tempDataId > 0) {
          return '修改销售单'
        } else {
          return '新增销售单'
        }
      }
    }
  },
  methods: {
    onSuccess (res) {
      this.modalData = false
      if (res == 1) {
        this.SearchSaleOrder()
      }
    },
    handleSummary ({ columns, data }) {
      let vm = this
      const sums = {}
      columns.forEach((column, index) => {
        const key = column.key
        if (index === 0) {
          sums[key] = {
            key,
            value: '合计'
          }
        } else if (key == 'Amount') {
          sums[key] = {
            key,
            value: Number(vm.Extras.Amount.toFixed(2))
          }
        } else if (key == 'FreightFee') {
          sums[key] = {
            key,
            value: Number(vm.Extras.FreightFee.toFixed(2))
          }
        } else if (key == 'GiveupFee') {
          sums[key] = {
            key,
            value: Number(vm.Extras.GiveupFee.toFixed(2))
          }
        } else if (key == 'AllFee') {
          sums[key] = {
            key,
            value: Number(vm.Extras.AllFee.toFixed(2))
          }
        } else if (key == 'PayFee') {
          sums[key] = {
            key,
            value: Number(vm.Extras.PayFee.toFixed(2))
          }
        } else {
          sums[key] = {
            key,
            value: ' '
          }
        }
      })
      return sums
    },
    SearchSaleOrder () {
      let vm = this
      vm.loadingTable = true
      if (typeof vm.sdate === 'object') {
        vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
      }
      if (typeof vm.edate === 'object') {
        vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
      }
      var reqData = {
        page: vm.page,
        size: vm.size,
        sdate: vm.sdate,
        edate: vm.edate,
        keyword: vm.keyword
      }
      SearchSaleOrder(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
          vm.Extras = data.Extras
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    GetSaleOrderAndPrint (id) {
      GetSaleOrderAndPrint(id).then((res) => {
        const data = res.data
        if (data.StatusCode == 200) {
          document
            .getElementById('iframe-print')
            .contentWindow.printData(data.Data)
        } else {
          this.$Message.error({ title: '提示', content: data.Errors })
        }
      })
    },
    DeleteSaleOrder (id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗？',
        onOk: () => {
          DeleteSaleOrder(id).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchSaleOrder()
              this.$Message.success({ title: '提示', content: '删除成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },
    CheckSaleOrder (id, status) {
      var content = '确定要弃审吗？'
      if (status == 1) {
        content = '审核后数据不允许修改，确定要审核吗？'
      }
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          var reqData = {
            Id: id,
            Status: status
          }
          CheckSaleOrder(reqData).then((res) => {
            const data = res.data
            if (data.StatusCode == 200) {
              this.SearchSaleOrder()
              this.$Message.success({ title: '提示', content: '操作成功' })
            } else {
              this.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        },
        onCancel: () => { }
      })
    },
    AddData () {
      this.tempDataId = 0
      this.tempType = 0
      this.modalData = true
    }
  },
  mounted () {
    this.tableHeight = window.innerHeight - 300
    this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
    this.edate = this.dayjs().format('YYYY年MM月DD日')
    this.SearchSaleOrder()
  }

}
</script>

<style>
</style>
